import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/", // 空路径重定向 main 页面
    redirect: "main",
  },
  {
    path: "/main", // 只有这个页面有 footer, 下属三个页面
    component: () => import("../views/Main.vue"),
    children: [
      {
        path: "/main", // 主页重定向
        redirect: "/main/store",
      },
      {
        path: "/main/common", // 主页社区页
        component: () => import("../views/main/Common.vue"),
      },
      {
        path: "/main/store", // 主页商城页
        component: () => import("../views/main/Store.vue"),
      },
      {
        path: "/main/mine", // 主页个人页
        component: () => import("../views/main/Mine.vue"),
        // 路由元信息
        meta: {
          requireLogin: true,
        },
      },
      {
        path: "/main/issuing", // 主页发布信息页, 暂时没有图片可以参考
        component: () => import("../views/main/Issuing.vue"),
      },
      {
        path: "/main/classify", // 商品类别查看页
        component: () => import("../views/main/Classify.vue"),
      },
    ],
  },
  {
    path: "/productlist/:id", // 商品类别查看页
    component: () => import("../views/ProductList.vue"),
  },
  {
    path: "/message", // 主页的消息页面, 但是不用到底部导航栏
    component: () => import("../views/Message.vue"),
    // 路由元信息
    meta: {
      requireLogin: true,
    },
  },
  {
    path: "/message/weibomsg", // 发布
    component: () => import("../views/main/Weibomsg.vue"),
  },
  {
    path: "/register", // 注册
    component: () => import("../views/Register.vue"),
  },
  {
    path: "/login", // 验证码登录页
    component: () => import("../views/Login.vue"),
  },
  {
    path: "/loginregister", //注册登录页
    component: () => import("../views/LoginRegister.vue"),
  },
  {
    path: "/product/:id", // 商品详情页
    component: () => import("../views/Product.vue"),
  },
  {
    path: "/cart", // 购物车页
    component: () => import("../views/Cart.vue"),
  },
  {
    path: "/order", // 订单页
    component: () => import("../views/Order.vue"),
  },
  {
    path: "/issue", // 我的发布信息详情页
    component: () => import("../views/Issue.vue"),
  },
  {
    path: "/minemsg", // 个人信息修改
    component: () => import("../views/MineMsg.vue"),
  },
  {
    path: "/petmsg", // 我的宠物信息修改
    component: () => import("../views/PetMsg.vue"),
  },
  {
    path: "/tobereleased", // 待付款页面
    component: () => import("../views/ToBeReleased.vue"),
  },
  {
    path: "/:pathMatch(.*)*", // 我的宠物信息修改
    component: () => import("../views/404.vue"),
  },
  {
    path: "/newAddress", // 我的宠物信息修改
    component: () => import("../views/Newaddress.vue"),
  },
  {
    path: "/qq", // 我的宠物信息修改
    component: () => import("../views/qq.vue"),
  },
  {
    path: "/wx", // 我的宠物信息修改
    component: () => import("../views/wx.vue"),
  },
  {
    path: "/wb", // 我的宠物信息修改
    component: () => import("../views/wb.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to,from是两个页面的路由信息
  // next相当于放行的意思
  // 表示需要用户登录的状态
  if (to.meta.requireLogin) {
    // 判断是否有token值，
    if (localStorage.getItem("token")) {
      // 有token值表示已经登录
      if (to.fullPath == "/main/mine") {
        // 判断现在跳转的页面
        next();
      } else if (to.fullPath == "/message") {
        next();
      }
    } else {
      // 没有让其跳转到登录页
      next("/login");
    }
  } else {
    next();
  }
});

export default router;
